import React from 'react'
import Header from './../newsComponents/news-header'
import IndexList from './../newsComponents/indexList'
import { Checkbox } from "antd-mobile";
import './index.scss'
const CheckboxItem = Checkbox.CheckboxItem;



export default function Com(props) {
  const onIndexListClick = (itm) => {
    console.log(itm)
  }

  const indexListData = [
    {
      title: "A",
      items: [
        {
          name: <>AAA</>
        },
        {
          name: <>AAA</>,
        },
      ]
    },
    {
      title: "B",
      items: [
        {
          name: "好友名字",
          avatar: "/images/HeadportraitStu.png",
          myComponents: ''
        }
      ]
    },
    {
      title: "C",
      items: [
        {
          name: "好友名字",
          avatar: "/images/HeadportraitStu.png",
          myComponents: ''
        }
      ]
    },
    {
      title: "D",
      items: [
        {
          name: "好友名字",
          avatar: "/images/HeadportraitStu.png",
          myComponents: ''
        }
      ]
    },
    {
      title: "E",
      items: [
        {
          name: "好友名字",
          avatar: "/images/HeadportraitStu.png",
          myComponents: ''
        }
      ]
    },
    {
      title: "F",
      items: [
        {
          name: "好友名字",
          avatar: "/images/HeadportraitStu.png",
          myComponents: ''
        }
      ]
    },
    {
      title: "G",
      items: [
        {
          name: "好友名字",
          avatar: "/images/HeadportraitStu.png",
          myComponents: ''
        }
      ]
    },
    {
      title: "H",
      items: [
        {
          name: "好友名字",
          avatar: "/images/HeadportraitStu.png",
          myComponents: ''
        }
      ]
    },
    {
      title: "I",
      items: [
        {
          name: "好友名字",
          avatar: "/images/HeadportraitStu.png",
          myComponents: ''
        }
      ]
    },
    {
      title: "J",
      items: [
        {
          name: "好友名字",
          avatar: "/images/HeadportraitStu.png",
          myComponents: ''
        }
      ]
    },
    {
      title: "K",
      items: [
        {
          name: "好友名字",
          avatar: "/images/HeadportraitStu.png",
          myComponents: ''
        }
      ]
    },
    {
      title: "L",
      items: [
        {
          name: "好友名字",
          avatar: "/images/HeadportraitStu.png",
          myComponents: ''
        }
      ]
    },
    {
      title: "M",
      items: [
        {
          name: "好友名字",
          avatar: "/images/HeadportraitStu.png",
          myComponents: ''
        }
      ]
    },
    {
      title: "N",
      items: [
        {
          name: "好友名字",
          avatar: "/images/HeadportraitStu.png",
          myComponents: ''
        }
      ]
    },
    {
      title: "O",
      items: [
        {
          name: "好友名字",
          avatar: "/images/HeadportraitStu.png",
          myComponents: ''
        }
      ]
    },
    {
      title: "p",
      items: [
        {
          name: "好友名字",
          avatar: "/images/HeadportraitStu.png",
          myComponents: ''
        }
      ]
    },
    {
      title: "Q",
      items: [
        {
          name: "好友名字",
          avatar: "/images/HeadportraitStu.png",
          myComponents: ''
        }
      ]
    },
    {
      title: "R",
      items: [
        {
          name: "好友名字",
          avatar: "/images/HeadportraitStu.png",
          myComponents: ''
        }
      ]
    },
    {
      title: "S",
      items: [
        {
          name: "好友名字",
          avatar: "/images/HeadportraitStu.png",
          myComponents: ''
        }
      ]
    },
    {
      title: "T",
      items: [
        {
          name: "好友名字",
          avatar: "/images/HeadportraitStu.png",
          myComponents: ''
        }
      ]
    },
    {
      title: "U",
      items: [
        {
          name: "好友名字",
          avatar: "/images/HeadportraitStu.png",
          myComponents: ''
        }
      ]
    },
    {
      title: "V",
      items: [
        {
          name: "好友名字",
          avatar: "/images/HeadportraitStu.png",
          myComponents: ''
        }
      ]
    },
    {
      title: "W",
      items: [
        {
          name: "好友名字",
          avatar: "/images/HeadportraitStu.png",
          myComponents: ''
        }
      ]
    },
    {
      title: "X",
      items: [
        {
          name: "好友名字",
          avatar: "/images/HeadportraitStu.png",
          myComponents: ''
        }
      ]
    },
    {
      title: "Y",
      items: [
        {
          name: "好友名字",
          avatar: "/images/HeadportraitStu.png",
          myComponents: ''
        }
      ]
    },
    {
      title: "Z",
      items: [
        {
          name: '<>ZZZ</>'
        }
      ]
    },
  ]

  return (
    <>
      <div className="container">
        <Header title="发起群聊" props={props} rightTitle="下一步" rightClick={() => {
          props.history.push('/news/startGroupCHat/startGroupCHat-setting')
        }} />
        <div className="content startGroupCHat_content">
          <p className="startGroupCHat_content_">选择群聊成员</p>

          <IndexList >
            {
              indexListData.map((item) => {
                return (
                  <ul key={item.title} className='index_list'>
                    <li id={item.title} className='index_list_title'>{item.title}</li>
                    {
                      item.items.map((itm, idx) => {
                        return (
                          <li className='index_list_item' onClick={() => { onIndexListClick(itm.name) }} key={item.title + Math.random()}>
                            <img src={itm.avatar} alt="" className='index_list_item_avatar' />
                            <strong className='index_list_item_name'>{itm.name}</strong>
                            <CheckboxItem />
                          </li>
                        )
                      })
                    }
                  </ul>
                )
              })
            }
          </IndexList>


        </div>
      </div>
    </>
  )
}
